<template>
  <div class="wrap">
    <SkyCardPanel title="按钮">
      <div slot="main">
        <div class="block">
          默认按钮
          <sky-button type="primary">主要</sky-button> <span></span>
          <sky-button type="default">默认</sky-button> <span></span>
          <sky-button type="secondary">次级</sky-button> <span></span>
          <sky-button type="success">成功</sky-button> <span></span>
          <sky-button type="warning">警告</sky-button> <span></span>
          <sky-button type="danger">危险</sky-button> <span></span>
        </div>
        <hr />
        <div class="block">
          尺寸控制
          <sky-button type="primary" size="big">大</sky-button> <span></span>
          <sky-button type="primary" size="middle">中</sky-button> <span></span>
          <sky-button type="primary" size="small">小</sky-button> <span></span>
        </div>
        <hr />
        <div class="block">
          加载按钮
          <sky-button type="primary" loading>主要</sky-button> <span></span>
          <sky-button type="default" loading>默认</sky-button> <span></span>
          <sky-button type="secondary" loading>次级</sky-button> <span></span>
        </div>
        <hr />
        <div class="block">
          禁用按钮
          <sky-button type="primary" disabled>主要</sky-button> <span></span>
          <sky-button type="default" disabled>默认</sky-button> <span></span>
          <sky-button type="secondary" disabled>次级</sky-button> <span></span>
        </div>
        <div></div>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              默认按钮

              &lt;sky-button type="primary"&gt;一级&lt;/sky-button&gt; 
              &lt;sky-button type="default"&gt;二级&lt;/sky-button&gt; 
              &lt;sky-button type="secondary"&gt;次级&lt;/sky-button&gt;
              &lt;sky-button type="success"&gt;成功&lt;/sky-button&gt;
              &lt;sky-button type="warning"&gt;警告&lt;/sky-button&gt;
              &lt;sky-button type="danger"&gt;危险&lt;/sky-button&gt;

               尺寸控制

              &lt;sky-button type="primary" size="big"&gt;大&lt;/sky-button&gt; 
              &lt;sky-button type="primary" size="middle"&gt;中&lt;/sky-button&gt; 
              &lt;sky-button type="primary" size="small"&gt;小&lt;/sky-button&gt; 

              加载按钮

              &lt;sky-button type="primary" loading&gt;一级&lt;/sky-button&gt;
              &lt;sky-button type="default" loading&gt;二级&lt;/sky-button&gt; 
              &lt;sky-button type="secondary" loading&gt;次级&lt;/sky-button&gt; 

              禁用按钮

              &lt;sky-button type="primary" disabled&gt;一级&lt;/sky-button&gt;
              &lt;sky-button type="default" disabled&gt;二级&lt;/sky-button&gt; 
              &lt;sky-button type="secondary" disabled&gt;次级&lt;/sky-button&gt; 
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="分离式按钮组">
      <div slot="main">
        <div class="block">
          <div class="block-item col-6">
            强场景-有箭头-左对齐
            <sky-button-group btntitle="更多" align="left">
              <sky-button @click="operation1">这是操作按钮,可以进行操作的按钮</sky-button>
              <sky-button @click="operation2">操作二</sky-button>
              <sky-button @click="operation3">操作三</sky-button>
            </sky-button-group>
          </div>
          <div class="block-item col-6">
            强场景-有箭头-右对齐
            <sky-button-group btntitle="更多" align="right">
              <sky-button @click="operation1">这是操作按钮,可以进行操作的按钮</sky-button>
              <sky-button @click="operation2">操作二</sky-button>
              <sky-button @click="operation3">操作三</sky-button>
            </sky-button-group>
          </div>
          <div class="block-item col-6">
            强场景-有箭头-有图标
            <sky-button-group btntitle="更多" align="left">
              <sky-button @click="operation1" isIconShow iconClass='icon_add'>新增</sky-button>
              <sky-button @click="operation1" isIconShow iconClass='icon_edit'>编辑</sky-button>
              <sky-button @click="operation1" isIconShow iconClass='icon_delete'>删除</sky-button>
              <sky-button @click="operation1" isIconShow iconClass='icon_import'>导入</sky-button>
              <sky-button @click="operation1" isIconShow iconClass='icon_export'>导出</sky-button>
              <sky-button @click="operation1" isIconShow iconClass='icon_download'>下载</sky-button>
            </sky-button-group>
          </div>
        </div>
        <hr />
        <div class="block">
          <div class="block-item col-6">
            强场景-无箭头-左对齐
            <sky-button-group btntitle="更多" :isArrow="false" align="left">
              <sky-button @click="operation1">这是操作按钮,可以进行操作的按钮</sky-button>
              <sky-button @click="operation2">操作二</sky-button>
              <sky-button @click="operation3">操作三</sky-button>
            </sky-button-group>
          </div>
          <div class="block-item col-6">
            强场景-无箭头-右对齐
            <sky-button-group btntitle="更多" :isArrow="false" align="right">
              <sky-button @click="operation1">这是操作按钮,可以进行操作的按钮</sky-button>
              <sky-button @click="operation2">操作二</sky-button>
              <sky-button @click="operation3">操作三</sky-button>
            </sky-button-group>
          </div>
        </div>
        <hr />
        <div class="block">
          弱场景-有箭头
          <sky-button-group weak>
            <sky-button @click="operation1">这是操作按钮,可以进行操作的按钮</sky-button>
            <sky-button @click="operation2">操作二</sky-button>
            <sky-button @click="operation3">操作三</sky-button>
          </sky-button-group>
        </div>
        <hr />
        <div class="block">
          弱场景-无箭头
          <sky-button-group weak :isArrow="false">
            <sky-button @click="operation1">这是操作按钮,可以进行操作的按钮</sky-button>
            <sky-button @click="operation2">操作二</sky-button>
            <sky-button @click="operation3">操作三</sky-button>
          </sky-button-group>
        </div>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              分离式按钮

              强场景-有箭头-左对齐
              &lt;sky-button-group :btntitle="更多" align="left"&gt;
              &lt;sky-button @click="operation1"&gt;这是操作按钮,可以进行操作的按钮&lt;/sky-button&gt;
              &lt;sky-button @click="operation2"&gt;操作二&lt;/sky-button&gt;
              &lt;sky-button @click="operation3"&gt;操作三&lt;/sky-button&gt;
              &lt;/sky-button-group&gt;

              强场景-有箭头-右对齐
              &lt;sky-button-group :btntitle="更多"  align="right"&gt;
                &lt;sky-button @click="operation1"&gt;这是操作按钮,可以进行操作的按钮&lt;/sky-button&gt;
                &lt;sky-button @click="operation2"&gt;操作二&lt;/sky-button&gt;
                &lt;sky-button @click="operation3"&gt;操作三&lt;/sky-button&gt;
              &lt;/sky-button-group&gt;

              强场景-有箭头-有图标
              &lt;sky-button-group :btntitle="更多" align="left"&gt;
                &lt;sky-button @click="operation1" isIconShow iconClass='icon_add'&gt;新增&lt;/sky-button&gt;
                &lt;sky-button @click="operation1" isIconShow iconClass='icon_edit'&gt;编辑&lt;/sky-button&gt;
                &lt;sky-button @click="operation1" isIconShow iconClass='icon_delete'&gt;删除&lt;/sky-button&gt;
                &lt;sky-button @click="operation1" isIconShow iconClass='icon_import'&gt;导入&lt;/sky-button&gt;
                &lt;sky-button @click="operation1" isIconShow iconClass='icon_export'&gt;导出&lt;/sky-button&gt;
                &lt;sky-button @click="operation1" isIconShow iconClass='icon_download'&gt;下载&lt;/sky-button&gt;
              &lt;/sky-button-group&gt;

              强场景-无箭头-左对齐
              &lt;sky-button-group :btntitle="更多" :isArrow="false" align="left"&gt;
              &lt;sky-button @click="operation1"&gt;这是操作按钮,可以进行操作的按钮&lt;/sky-button&gt;
              &lt;sky-button @click="operation2"&gt;操作二&lt;/sky-button&gt;
              &lt;sky-button @click="operation3"&gt;操作三&lt;/sky-button&gt;
              &lt;/sky-button-group&gt;

              强场景-无箭头-右对齐
              &lt;sky-button-group :btntitle="更多" :isArrow="false"  align="right"&gt;
                &lt;sky-button @click="operation1"&gt;这是操作按钮,可以进行操作的按钮&lt;/sky-button&gt;
                &lt;sky-button @click="operation2"&gt;操作二&lt;/sky-button&gt;
                &lt;sky-button @click="operation3"&gt;操作三&lt;/sky-button&gt;
              &lt;/sky-button-group&gt;

             弱场景-有箭头
              &lt;sky-button-group weak :btntitle="更多" &gt;
              &lt;sky-button @click="operation1"&gt;这是操作按钮,可以进行操作的按钮&lt;/sky-button&gt;
              &lt;sky-button @click="operation2"&gt;操作二&lt;/sky-button&gt;
              &lt;sky-button @click="operation3"&gt;操作三&lt;/sky-button&gt;
              &lt;/sky-button-group&gt;

             弱场景-无箭头
              &lt;sky-button-group weak :btntitle="更多" :isArrow="false" &gt;
              &lt;sky-button @click="operation1"&gt;这是操作按钮,可以进行操作的按钮&lt;/sky-button&gt;
              &lt;sky-button @click="operation2"&gt;操作二&lt;/sky-button&gt;
              &lt;sky-button @click="operation3"&gt;操作三&lt;/sky-button&gt;
              &lt;/sky-button-group&gt;

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>
  </div>
</template>

<script>
  export default {
    methods: {
      operation1 () {
        console.log("111");
      },
      operation2 () {
        console.log("222");
      },
      operation3 () {
        console.log("333");
      },
    },
  };
</script>

<style lang="scss" scoped>
</style>